<template>
  <div class="RoLe">
    <el-row>
      <el-button type="success" @click="edit">+添加 </el-button>
    </el-row>

    <template>
      <el-table :data="tableData" style="width: 99%" height="550">
        <el-table-column label="名称" width="400">
          <template slot-scope="scope">

            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明" width="400">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">


              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.profile }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>


  </div>
</template>
  
<script>
import { rootjuese,rootdeljuese } from "@/api/index"
export default {
  name: 'RoLe',
  data() {
    return {
      tableData: [],
      vishow: false,
      checked: false,
      ruleForm: {},
      rules: {

      }
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.vishow = true

    },
    handleDelete(index, row) {
     this.rootdeljueses({
      id:row.id
     })
    },
    // // 删除接口
    async rootdeljueses(params) {
      let data = await rootdeljuese(params)
      if (data.msg === "success") {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      } else {
        this.$message.error(data.msg);
      }
    },

    // 添加 修改
    edit() {
      this.$router.push({
        path: "/ROOT/IncreAse",
        // query:{
        // 	id:this.id
        // }
      })
    }
  },
  async mounted() {
    let { data: res } = await rootjuese(sessionStorage.getItem("token"))
    console.log(res)
    this.tableData = res
  },

}




</script>
<style lang="scss" scoped>
.RolesMange {

  &::v-deep td,
  th .cell {
    text-align: center;
  }

  &::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
  }
}
</style>